import React, { Component } from 'react';
import { NavBar, Carousel,Flex } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
import styles from "./index.module.scss"
import Search from "../search/search"
import axios from "axios"
class Index extends Component {
    state = {
        swiper_list: [],
        imgHeight: 176,
        title_list:[],
        links_list:[]
    }
    componentDidMount() {
        axios.get("https://www.linweiqin.cn/api/public/v1/home/swiperdata").then((res) => {
            // console.log(res.data.message[0].goods_id)
            this.setState({
                swiper_list: res.data.message
            })
        })
        axios.get("https://www.linweiqin.cn/api/public/v1/home/catitems").then((val) => {
            // console.log(val.data.message)
            this.setState({
                title_list: val.data.message
            })
        })
        axios.get("https://www.linweiqin.cn/api/public/v1/home/floordata").then((txt) => {
            console.log(txt.data.message)
            this.setState({
                links_list: txt.data.message
            })
        })
    }
    handleSwiperClick=(goos) => {
       this.props.history.push("/swiperGoos/"+goos)
    }
    handleCatItemClick=(params) => {
        this.props.history.push("/category"); 
    }
    handleImgClick=(params) => {
        // this.props.history.push("/goodList/query='123'");
        console.log(123)
    }
    
    
    
    render() {
        return (
            <div className={styles.index}>
                {/* {nav 开始} */}
                <div className={styles.index_nav}>
                    <NavBar className={styles.index_nav_navbar}>优购商城</NavBar>
                </div>
                {/* nav 结束 */}
                {/* 搜索开始 */}
                <div className={styles.index_search}>
                    <Search></Search>
                </div>
                {/* 搜索结束 */}
                {/* 轮播图开始 */}
                <div className={styles.index_swiper}>
                    
                    <Carousel>
                        {this.state.swiper_list.map(val => (
                                <div
                                onClick={this.handleSwiperClick.bind(this, val.goods_id)}
                                key={val.goods_id}
                                style={{
                                  display: "inline-block",
                                  width: "100%",
                                  height: this.state.imgHeight,
                                }}
                              >
                            <img
                                src={val.image_src}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                            </div>
                        ))}
                    </Carousel>
                </div>
                {/* 轮播图结束 */}
                {/* 分类导航开始 */}
                <div className={styles.index_title}>
                   <Flex>
                  {
                      this.state.title_list.map(v=>{
                        return <Flex.Item key={v.image_src} onClick={this.handleCatItemClick}>
                            <img src={v.image_src} alt=""/>
                        </Flex.Item>
                    })
                  }
                   </Flex>
                </div>
                 {/* 分类导航结束 */}
                 {/* 热门款式导航开始 */}
                 <div className={styles.index_links}>
                     {this.state.links_list.map(val=>{
                         return <div key={val.floor_title.image_src} className={styles.index_links_itme}>
                             <div className={styles.index_links_itme_img}>
                                 <img src={val.floor_title.image_src}></img>
                             </div>
                             <div className={styles.index_links_itme_imglest}>
                                    {val.product_list.map(res=>{
                                        return <div className={styles.links_itme_imglest_text} key={res.image_src} onClick={this.handleImgClick()}>
                                                <img src={res.image_src}></img>
                                        </div>
                                    })}
                             </div>
                         </div>
                     })}
                 </div>
                 {/* 热门款式导航结束 */}
            </div>
        );
    }
}

export default Index;
